<script setup lang="ts">
import { reactive, ref } from "vue";
import { LotDto } from "@/config/lot.dto";
import { doInqLotList } from "@/api/lot/lot";

defineOptions({
  name: "LotQuery"
});

const lotList = ref([]);
const lotParams = reactive(LotDto);
// const lotDetail = ref({})

const onQuery = () => {
  getLotListData();
};

const getLotListData = async () => {
  const data = await doInqLotList(lotParams);
  lotList.value = data.body.data.content;
};
const methods = [
  {
    buttonName: "cancel",
    clickEvent: () => {
      console.log("关闭页面");
    },
    hotKey: "f2"
  },
  {
    buttonName: "confirm",
    type: true,
    permission: true,
    beforePermission: () => {
      return true;
    },
    clickEvent: () => {
      console.log("确认提交");
    },
    hotKey: "f1"
  }
];

const tableData = [
  {
    slot: 25,
    lotID: "DM000008.00",
    carrierID: "PD01058",
    status: "WAITING",
    stepStatus: "WaitinglnUseStart",
    lotType: "Dummy",
    subLotType: "Dummy"
  },
  {
    slot: 24,
    lotID: "DM000011.00",
    carrierID: "PD01097",
    status: "WAITING",
    stepStatus: "WaitinglnUseStart"
  },
  {
    slot: 23,
    lotID: "DM000013.00",
    carrierID: "DM00001",
    status: "WAITING",
    stepStatus: "WaitinglnUseStart",
    lotType: "Dummy",
    subLotType: "Dummy"
  },
  {
    slot: 22,
    lotID: "DM000015.00",
    carrierID: "DM00003",
    status: "WAITING",
    stepStatus: "WaitinglnUseStart",
    lotType: "Dummy",
    subLotType: "Dummy"
  },
  {
    slot: 21,
    lotID: "DM000017.00",
    carrierID: "DM00005",
    status: "WAITING",
    stepStatus: "WaitinglnUseStart",
    lotType: "Dummy",
    subLotType: "Dummy"
  },
  {
    slot: 20,
    lotID: "EM000041.00",
    carrierID: "EM00008",
    status: "ONHOLD",
    stepStatus: "WaitingSetup",
    lotType: "Equipment Monitor",
    subLotType: "Equipment Monitor"
  },
  {
    slot: 19,
    lotID: "EM000052.00",
    carrierID: "EM00102",
    status: "ONHOLD",
    stepStatus: "WaitingSetup",
    lotType: "Equipment Monitor",
    subLotType: "Equipment Monitor"
  },
  {
    slot: 18,
    lotID: "EM000043.00",
    carrierID: "EM00322",
    status: "ONHOLD",
    stepStatus: "WaitingSetup",
    lotType: "Equipment Monitor",
    subLotType: "Equipment Monitor"
  },
  {
    slot: 17,
    lotID: "DM000019.02",
    carrierID: "",
    status: "PROCESSING",
    stepStatus: "WaitingDummyOut",
    lotType: "Dummy",
    subLotType: "Dummy"
  },
  {
    slot: 16,
    lotID: "FA000198.00",
    carrierID: "PD00206",
    status: "PROCESSING",
    stepStatus: "WaitingSetup",
    lotType: "Production",
    subLotType: "FA"
  },
  {
    slot: 15,
    lotID: "FA000155.00",
    carrierID: "PD00692",
    status: "PROCESSING",
    stepStatus: "WaitingSetup",
    lotType: "Production",
    subLotType: "FA"
  }
];
</script>
<template>
  <div class="content-container">
    <div class="container-content">
      <el-card class="flex-shrink mb-3 pr0">
        <div class="flex-row">
          <div class="item-box">
            <div class="title">{{ $t("product-id") }}</div>
            <cim-input v-model="lotParams.lotStatus" />
          </div>
          <div class="item-box">
            <div class="title">{{ $t("carrier-id") }}</div>
            <cim-input v-model="lotParams.lotStatus" />
          </div>
          <div class="item-box">
            <div class="title">{{ $t("lot-id") }}</div>
            <cim-input v-model="lotParams.lotStatus" />
          </div>
          <div class="item-box">
            <cim-divider direction="vertical" class="divider" />
            <div class="title">{{ $t("merge-type") }}</div>
            <cim-radio-group v-model="all">
              <cim-radio :label="3">{{ $t("all") }}</cim-radio>
              <cim-radio :label="6">{{ $t("production") }}</cim-radio>
            </cim-radio-group>
          </div>

          <cim-button type="primary" class="lot-button" @click="onQuery">{{
            $t("query")
          }}</cim-button>
          <cim-button class="lot-button" @click="onQuery">{{
            $t("clear")
          }}</cim-button>
        </div>
      </el-card>
      <el-card class="flex-shrink mb-3 pr0 pb0">
        <div class="table-header">
          <div class="table-title">{{ $t("lot-info") }}</div>
          <div class="svg-box"></div>
        </div>
        <cim-form :inline="true" :label-position="'top'" :model="lotParams">
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('product-id')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('process-flow-id')">
              <cim-input v-model="lotParams.carrierID" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('route')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('step-id')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('operation-number')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('sub-lot-type')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('lot-status')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('wafer-qty')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="6">
            <cim-form-item :label="$t('description')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col btn-bottom" :span="6">
            <cim-button @click="onQuery">{{ $t("detail-info") }}</cim-button>
            <cim-button @click="onQuery">{{ $t("carrier-info") }}</cim-button>
          </cim-col>
        </cim-form>
      </el-card>
      <el-card class="flex1 mb-3">
        <cim-row class="h100">
          <cim-col :span="16">
            <div class="table-header">
              <div class="table-title">{{ $t("lot-list") }}</div>
              <div class="svg-box">
                <cim-divider direction="vertical" class="divider" />
                <img src="../../../assets/svg/bg_quanping.svg" class="mr8" />
              </div>
            </div>
            <div class="tran-box">
              <div class="flex1">
                <vxe-table
                  :data="tableData"
                  border
                  row-id="name"
                  show-overflow
                  :row-config="{ height: 24 }"
                  :column-config="{ resizable: true }"
                  height="100%"
                  width="100%"
                >
                  <vxe-column type="checkbox" width="45"></vxe-column>
                  <vxe-column field="slot" :title="$t('slot-id')" width="80" />
                  <vxe-column
                    field="stepStatus"
                    :title="$t('wafer-id')"
                    width="170"
                  />
                  <vxe-column field="lotID" :title="$t('lot-id')" width="125" />
                  <vxe-column
                    field="carrierID"
                    :title="$t('carrier-id')"
                    width="121"
                  />
                </vxe-table>
              </div>
              <div class="button-box flex-shrink">
                <cim-button
                  class="icon-btn"
                  icon-prefix="single-right-arrow-outline"
                ></cim-button>
                <cim-button
                  class="icon-btn"
                  icon-prefix="single-left-arrow-outline"
                ></cim-button>
                <cim-button
                  class="icon-btn"
                  icon-prefix="double-right-arrow-outline"
                ></cim-button>
                <cim-button
                  class="icon-btn"
                  icon-prefix="double-left-arrow-outline"
                ></cim-button>
              </div>
              <div class="flex1">
                <vxe-table
                  :data="tableData"
                  border
                  row-id="name"
                  show-overflow
                  :row-config="{ height: 24 }"
                  :column-config="{ resizable: true }"
                  height="100%"
                  width="100%"
                >
                  <vxe-column type="checkbox" width="45"></vxe-column>
                  <vxe-column field="slot" :title="$t('slot-id')" width="70" />
                  <vxe-column
                    field="stepStatus"
                    :title="$t('wafer-id')"
                    width="170"
                  />
                  <vxe-column
                    field="subLotType"
                    :title="$t('target-carrier-id')"
                    width="160"
                  />
                </vxe-table>
              </div>
              <div class="button-box flex-shrink">
                <cim-button
                  class="icon-btn"
                  icon-prefix="single-right-arrow-outline"
                ></cim-button>
                <cim-button
                  class="icon-btn"
                  icon-prefix="single-left-arrow-outline"
                ></cim-button>
                <cim-button
                  class="icon-btn"
                  icon-prefix="double-right-arrow-outline"
                ></cim-button>
                <cim-button
                  class="icon-btn"
                  icon-prefix="double-left-arrow-outline"
                ></cim-button>
              </div>
            </div>
          </cim-col>
          <cim-col :span="8">
            <div class="table-header">
              <div class="table-title">{{ $t("selected-lot-list") }}</div>
            </div>
            <div class="col-height">
              <vxe-table
                :data="tableData"
                border
                row-id="name"
                show-overflow
                :row-config="{ height: 24 }"
                :column-config="{ resizable: true }"
                height="100%"
                width="100%"
              >
                <vxe-column title="no" field="slot" width="50" />
                <vxe-column field="lotID" :title="$t('lot-id')" width="300" />
                <vxe-column
                  field="qty"
                  :title="$t('source-carrier-id')"
                  width="200"
                />
              </vxe-table>
            </div>
          </cim-col>
        </cim-row>
      </el-card>
      <el-card class="flex-shrink mb-12 pr0 pb0">
        <div class="table-header">
          <div class="table-title">{{ $t("after-merge") }}</div>
          <div class="svg-box">
            <cim-divider direction="vertical" class="divider" />
            <cim-radio-group>
              <cim-radio :label="3">{{ $t("hold") }}</cim-radio>
              <cim-radio :label="6">{{ $t("not-hold") }}</cim-radio>
            </cim-radio-group>
          </div>
        </div>
        <cim-form :inline="true" :label-position="'top'" :model="lotParams">
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('sponsor')">
              <cim-input v-model="lotParams.lotStatus" />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('sponsor-tel')">
              <cim-input v-model="lotParams.carrierID" />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('department')">
              <cim-input v-model="lotParams.lotStatus" />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('section')">
              <cim-input v-model="lotParams.lotStatus" />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="3">
            <cim-form-item :label="$t('reason-code')">
              <cim-input v-model="lotParams.lotStatus" />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="9">
            <cim-form-item :label="$t('reason-code-desc')">
              <cim-input v-model="lotParams.lotStatus" disabled />
            </cim-form-item>
          </cim-col>
          <cim-col class="item-col" :span="24">
            <cim-form-item :label="$t('memo')">
              <cim-input v-model="lotParams.lotStatus" />
            </cim-form-item>
          </cim-col>
        </cim-form>
      </el-card>
    </div>
    <div class="footer">
      <cim-button class="lot-button" @click="onQuery">{{
        $t("cancel")
      }}</cim-button>
      <cim-button type="primary" class="lot-button" @click="onQuery">{{
        $t("confirm")
      }}</cim-button>
    </div>
  </div>
</template>

<style scoped>
@import url("index.scss");
</style>
